<template>
    <div class="custom-dialog-container" :style="containerStyle">
        <div class="wrapper"></div>
        <div class="content" :style="contentStyle">
            <div class="head">
                <span>{{title}}</span>
                <i @click="onCancel" class="close-btn el-icon-close"></i>
            </div>
            <div class="center">
                <slot></slot>
            </div>
            <div class="bottom">
                <el-button size="small" @click="onCancel" class="button dialog-button cancel" v-if="showCancel">{{cancelText}}</el-button>
                <el-button type="primary" size="small" @click="onConfirm" class="button dialog-button confirm" v-if="showConfirm">{{confirmText}}</el-button>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'customDialog',
    props: {
        visible: {
            type: Boolean,
            default: true
        },
        showCancel: {
            type: Boolean,
            default: true
        },
        showConfirm: {
            type: Boolean,
            default: true
        },
        cancelText: {
            type: String,
            default: '关闭'
        },
        confirmText: {
            type: String,
            default: '确定'
        },
        title: {
            type: String,
            default: ''
        },
        width: {
            type: Number,
            default: 600
        },
        height: {
            type: Number,
            default: 267
        }
    },
    data() {
        return {
            dialogVisible: this.visible
        }
    },
    computed: {
        containerStyle: function () {
            return {
                display: this.dialogVisible ? 'block' : 'none'
            };
        },
        contentStyle: function () {
            return {
                width: this.width + 'px',
                height: this.height + 'px',
                marginTop: -(this.height / 2) + 'px',
                marginLeft: -(this.width / 2) + 'px'
            };
        }
    },
    methods: {
        onCancel: function () {
            this.dialogVisible = false;
            this.$emit('on-cancel');
        },
        onConfirm: function () {
            this.$emit('on-confirm');
        }
    },
    watch: {
        visible: function (val) {
            this.dialogVisible = val;
        }
    }
}
</script>
<style lang="scss" scoped>
    .custom-dialog-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 111;
        .wrapper,
        .content {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        .wrapper {
            background: rgba(0, 0, 0, .5);
            z-index: 1;
        }
        .content {
            top: 50%;
            left: 50%;
            padding: 20px;
            background: #fff;
            border-radius: 4px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
            z-index: 11;
            display: flex;
            flex-direction: column;
            overflow-x: hidden;
            overflow-y: auto;
            .head {
                height: 18px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                span {
                    font-size: 18px;
                    line-height: 18px;
                    color: #333333;
                }
                .close-btn {
                    border: 0;
                    outline: none;
                    color: #959698;
                    font-size: 16px;
                    cursor: pointer;
                    margin: -5px -2px 0 0;
                }
            }
            .center {
                flex: 1;
                margin: 20px 0 30px 0;
                display: flex;
                align-items: center;
                overflow: hidden;
            }
            .bottom {
                display: flex;
                justify-content: center;

                button {
                    width: 80px;
                    float: left;
                }
            }
        }
    }
</style>
